<template>
  <div style="position: relative;">
    <el-image class="avatar" fit="contain" style="width: 178px !important;height: 178px" :src="url" @mouseover="mouseOver" @mouseleave="mouseLeave" />
    <i
      v-show="disabled"
      class="el-icon-delete icon"
      @mouseover="mouseOver"
      @click="handleRemove(index)"
    />
  </div>
</template>

<script>
export default {
  name: 'Pictures',
  props: {
    url: {
      type: String,
      default: () => {
        return ''
      }
    },
    index: {
      type: Number,
      default: () => {
        return null
      }
    }
  },
  data() {
    return {
      disabled: false
    }
  },
  methods: {
    mouseOver() {
      this.disabled = true
    },

    mouseLeave() {
      this.disabled = false
    },

    handleRemove(file) {
      this.$emit('deletefile', file)
      this.disabled = false
    }
  }
}
</script>

<style>
.avatar{
  width: 100% !important;
}
.icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: aliceblue;
  cursor: pointer;
  font-size: 20px;
}
</style>
